<template>
  <div class="qt_detail">
      <h4>质检员列表>质检员详情</h4>
      <div class="container" style="padding:0;">
          <div class="baseInfo">
               <h4>基础信息</h4>
                <div class="info">
                    <div>真实姓名：丽丽</div> 
                    <div>联系方式：15263258745</div>   
                    <div>所属站点：省市区-江苏**盱眙</div>  
                    <div>状态：可用</div>
                </div>
          </div>
          <!-- 订单统计 -->
          <div class="order_count">
              <h4>订单统计</h4>
              <div class="box">
                 <div class="title" >
                     <el-date-picker
                            v-model="value4"
                            type="month"
                            placeholder="选择年月">
                    </el-date-picker>
                   <el-button type="primary" size="mini">搜索</el-button>
                   <div class="right" style="float:right;font-size:14px;">
                       <span >处理订单：500笔</span>
                       <span style="margin-left:100px;">处理龙虾：6000箱</span>
                       <span style="margin-left:100px;">实际质量：180000斤</span>
                   </div>
                 </div>
                 <el-table  :data="tableOrder" border  style="width: 100%" :header-cell-style="rowClass">
                    <el-table-column type="index"  width="80" label="序号" align="center"></el-table-column>
                    <el-table-column
                        prop="orderNum"
                        label="订单编号"
                        width="180" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="orderCount"
                        label="订单总量"
                        width="180" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="quality"
                        label="实际质量" align="center">
                    </el-table-column>
                     <el-table-column
                        prop="time"
                        label="质检时间" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="result"
                        label="质检结果"  align="center">
                    </el-table-column>
              </el-table>
                 
              </div>
          </div>
          <!-- 认证 统计 -->
            <div class="approve_count">
              <h4>认证统计</h4>
              <div class="box">
                 <div class="title" >
                     <el-date-picker
                            v-model="value4"
                            type="month"
                            placeholder="选择年月">
                    </el-date-picker>
                   <el-button type="primary" size="mini">搜索</el-button>
                   <div class="right" style="float:right;font-size:14px;">
                       <span >共处理20个认证申请</span>
                       <span style="margin-left:100px;">认证通过15人</span>
                       <span style="margin-left:100px;">认证不通过5人</span>
                   </div>
                 </div>
                 <el-table  :data="tableOrder" border  style="width: 100%" :header-cell-style="rowClass">
                    <el-table-column type="index"  width="80" label="序号" align="center"></el-table-column>
                    <el-table-column
                        prop="orderNum"
                        label="订单编号"
                        width="180" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="orderCount"
                        label="订单总量"
                        width="180" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="quality"
                        label="实际质量" align="center">
                    </el-table-column>
                     <el-table-column
                        prop="time"
                        label="质检时间" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="result"
                        label="质检结果"  align="center">
                    </el-table-column>
              </el-table>
                 
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
      return {
          value4: '2018-07',
          tableOrder: [{
                    orderNum:'20180101000001',
                    orderCount:'3箱',
                    quality:'87斤',
                    time:'2018-07-03  12:33:33',
                    result:'合格'
                    }, {
                     orderNum:'20180101000001',
                    orderCount:'3箱',
                    quality:'87斤',
                    time:'2018-07-03  12:33:33',
                    result:'合格'
                    }, {
                     orderNum:'20180101000001',
                    orderCount:'3箱',
                    quality:'87斤',
                    time:'2018-07-03  12:33:33',
                    result:'合格'
                    }, {
                   orderNum:'20180101000001',
                    orderCount:'3箱',
                    quality:'87斤',
                    time:'2018-07-03  12:33:33',
                    result:'合格'
        }],
      }
    },
    created(){
       console.log(this.value4);
    },
    methods:{
      rowClass({ row, rowIndex}) {
            console.log(rowIndex) //表头行标号为0
            return 'background:#ebeef5'
       } 
    }

 }
</script>
<style  scoped>
.qt_detail > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.container {
    line-height:50px;
    border-radius: 0;
}
.container h4 {
    background-color: #eee;
    line-height: 50px;
    font-weight: 400;
    font-size:16px;
    padding-left:30px;
    color: #999;

}
.container .info {
    display: flex;
    padding: 0  30px;
    
}
.container .info  div {
    margin-right:100px;
}
.order_count .box, .approve_count .box {
    padding: 10px  30px;
}
</style>